<template>
    <div class="body jinli" v-if="JSON.stringify(cpInfo) != '{}'">
        <div class="readback">
            <div class="new_com_logo">
                <div class="logo_box" @click="changeImgClick()">
                    <img :src="cpInfo.company_info.logo" alt="" class="logo" />
                    <div class="logo_edit font12">编辑</div>
                </div>
                <input
                    type="file"
                    accept="image/*"
                    name="head_pic"
                    ref="filElem"
                    @change="handleFiles($event)"
                    style="display: none"
                />
                <div class="com_name substring font15">
                    {{ cpInfo.company_info.companyname }}
                </div>
            </div>
            <div class="split-block"></div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 企业名称
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="companyname"
                        class="font13"
                        value=""
                        v-model="cpInfo.company_info.companyname"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt qs-relative notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 企业简称
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="short_name"
                        class="font13"
                        value=""
                        placeholder="请填写大家最熟悉的名字"
                        v-model="cpInfo.company_info.short_name"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="imSelectParent">
                <div
                    class="list_height plist-txt imitateSelect"
                    @click="qiyeKey = !qiyeKey"
                >
                    <div class="pic"></div>
                    <div class="tit font14">
                        <span class="font_red_light">*</span> 企业性质
                    </div>
                    <div class="describe font13">
                        <span class="selectTxt">{{
                            cpInfo.company_info.nature_cn
                        }}</span>
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
                <van-action-sheet
                    v-model="qiyeKey"
                    :actions="qiyeactions"
                    @select="qiyeSelect"
                    :duration="0.2"
                />
            </div>
            <div
                class="list_height plist-txt qs-relative js-actionParent"
                @click="addressKey = !addressKey"
            >
                <div class="abAct js-showActionSheet"></div>
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 所在地区
                </div>
                <div
                    class="describe font13 qs-temp-new-city"
                    data-multiple="false"
                >
                    <span class="qs-temp-txt-city" data-otxt="请选择">{{
                        cpInfo.company_info.district_cn
                    }}</span>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>

            <div
                class="list_height plist-txt qs-relative js-actionParent"
                @click="hangyeKey = !hangyeKey"
            >
                <div class="abAct js-showActionSheet"></div>
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 所属行业
                </div>
                <div class="describe font13 qs-temp-level1">
                    <span class="qs-temp-txt-trade" data-otxt="请选择">{{
                        cpInfo.company_info.trade_cn
                    }}</span>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <van-action-sheet
                v-model="hangyeKey"
                :actions="hangyeactions"
                @select="hangyeSelect"
                :duration="0.2"
            />
            <div class="imSelectParent">
                <div
                    class="list_height plist-txt imitateSelect"
                    @click="guimoKey = !guimoKey"
                >
                    <div class="pic"></div>
                    <div class="tit font14">
                        <span class="font_red_light wh">*</span> 企业规模
                    </div>
                    <div class="describe font13">
                        <span class="selectTxt">{{
                            cpInfo.company_info.scale_cn
                        }}</span>
                    </div>
                    <div class="arrow"></div>
                    <div class="clear"></div>
                </div>
            </div>
            <van-action-sheet
                v-model="guimoKey"
                :actions="guimoctions"
                @select="guimoSelect"
                :duration="0.2"
            />
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 企业简介
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="short_desc"
                        class="font13"
                        value=""
                        placeholder="请用一句话描述企业的主营业务"
                        v-model="cpInfo.company_info.short_desc"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div
                class="list_height qs-relative plist-txt"
                @click="openProps(0)"
            >
                <div class="abAct J_describe"></div>
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 企业介绍
                </div>
                <a class="describe font13 describeText">{{
                    cpInfo.company_info.contents
                }}</a>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div
                class="list_height plist-txt qs-relative last"
                @click="openProps(1)"
            >
                <div class="abAct J_tag"></div>
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 企业福利
                </div>
                <a class="describe font13 J_tag_txt">{{
                    cpInfo.company_info.tag_cn
                }}</a>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="split-block"></div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 联系人
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="contact"
                        placeholder="请输入联系人"
                        class="font13 tl"
                        value=""
                        v-model="cpInfo.company_info.contact"
                    />
                    <div
                        class="des_prv J_des_check font13"
                        :class="{
                            checked: cpInfo.company_info.contact_show == 1,
                        }"
                        @click="
                            cpInfo.company_info.contact_show == 1
                                ? (cpInfo.company_info.contact_show = 0)
                                : (cpInfo.company_info.contact_show = 1)
                        "
                    >
                        公开
                    </div>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 联系电话
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="telephone"
                        placeholder="请输入联系手机"
                        class="font13 tl J_for_pop_edit"
                        value=""
                        v-model="cpInfo.company_info.telephone"
                    />
                    <div
                        class="des_prv J_des_check font13"
                        :class="{
                            checked: cpInfo.company_info.telephone_show == 1,
                        }"
                        @click="
                            cpInfo.company_info.telephone_show == 1
                                ? (cpInfo.company_info.telephone_show = 0)
                                : (cpInfo.company_info.telephone_show = 1)
                        "
                    >
                        公开
                    </div>
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height qs-relative plist-txt notarrow">
                <div class="abAct J_tel"></div>
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 企业固话
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="email"
                        placeholder="请输入企业固话"
                        class="font13"
                        value=""
                        v-model="cpInfo.company_info.landline_tel"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> 联系邮箱
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="email"
                        placeholder="请输入联系邮箱"
                        class="font13"
                        value=""
                        v-model="cpInfo.company_info.email"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light wh">*</span> QQ
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="qq"
                        placeholder="请输入联系QQ"
                        class="font13"
                        value=""
                        v-model="cpInfo.company_info.qq"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="list_height plist-txt notarrow">
                <div class="pic"></div>
                <div class="tit font14">
                    <span class="font_red_light">*</span> 联系地址
                </div>
                <div class="describe">
                    <input
                        type="text"
                        name="address"
                        placeholder="请输入详细地址"
                        class="font13"
                        value=""
                        v-model="cpInfo.company_info.address"
                    />
                </div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="split-block"></div>
            <div class="com_img_box">
                <div class="cib_title substring font13">
                    企业风采
                    <span class="font10"
                        >(可上传8张,每张最大800KB,支持jpg/gif/bmp/png格式)</span
                    >
                </div>
                <div class="cib_group">
                    <div
                        class="cib_cell"
                        v-for="(item, index) in cpInfo.company_info.company_img"
                        :key="index"
                    >
                        <img :src="item" alt="" />
                    </div>
                    <div
                        class="cib_cell add J_cib_group"
                        @click="changeImgClick('more')"
                    >
                        <input
                            type="file"
                            accept="image/*"
                            name="portrait_image"
                            style="display: none"
                            required="required"
                            multiple="multiple"
                            ref="filElemmore"
                            @change="handleFiles($event, 'more')"
                        />
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="j_newbutton">
                <div class="j_newbtn" @click="closejibenxinxi()">保存</div>
            </div>
            <div class="zhanwei"></div>
            <van-popup
                v-model="addressKey"
                position="bottom"
                :style="{ height: '60%' }"
            >
                <Cascader
                    v-if="addressKey"
                    :jobs="cpInfo.city"
                    :title="'请选择地区'"
                    :num="1"
                    :leavl="3"
                    @calcaCallback="calcaCallbacaddres"
                />
            </van-popup>
            <!-- 企业介绍 -->
            <Qiyejieshao
                v-if="proprKey === 0"
                :contents="cpInfo.company_info.contents"
                @closeProps="qiyejieshaoSelect"
            />
            <!-- 企业福利 -->
            <Qiyefuli
                v-if="proprKey === 1"
                :totaltag_arr="cpInfo.tag_arr"
                :tag_arr="cpInfo.company_info.tag_arr"
                @closeProps="qiyefuliSelect"
            />
            <van-overlay :show="allImglength != 0" @click="show = false">
                <van-loading color="#fff" size="1.3rem"
                    >图片上传中。。。</van-loading
                >
            </van-overlay>
        </div>
    </div>
</template>

<script>
import { axiosPostnotoken, axiosPost } from '../../axios';
import Cascader from '../../components/Cascader';
import Qiyefuli from '../../components/company/Qiyefuli';
import Qiyejieshao from '../../components/company/Qiyejieshao';
import { Toast } from 'vant';
export default {
    name: '',
    components: { Cascader, Qiyefuli, Qiyejieshao },
    data() {
        return {
            loading: false,
            allImglength: 0,
            cpInfo: {},
            proprKey: '',

            // 企业性质
            qiyeKey: false,
            qiyeactions: [],

            // 所在地区
            addressKey: false,

            // 行业选择
            hangyeKey: false,
            hangyeactions: [],

            // 企业规模
            guimoKey: false,
            guimoctions: [],
        };
    },
    computed: {},
    mounted() {
        this.getJianliYindao();
    },
    methods: {
        // 点击保存
        closejibenxinxi() {
            // console.log(JSON.parse(JSON.stringify(this.cpInfo.company_info)));

            axiosPost(
                '/apis/company/store',
                this.cpInfo.company_info,
                (res) => {
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                }
            );
        },
        // 企业介绍
        qiyejieshaoSelect(data) {
            document.body.style.overflow = '';
            this.proprKey = '';
            this.cpInfo.company_info.contents = data.content;
        },
        // 企业福利
        qiyefuliSelect(data) {
            // console.log(data);
            document.body.style.overflow = '';
            this.proprKey = '';

            this.cpInfo.company_info.tag_cn = data.tag_cn;
            this.cpInfo.company_info.tag = data.tag;
        },
        // 企业规模选择回调
        guimoSelect(item) {
            this.guimoKey = false;
            this.cpInfo.company_info.scale_cn = item.name;
            this.cpInfo.company_info.scale = item.id;
        },
        // 行业选择回调
        hangyeSelect(item) {
            this.hangyeKey = false;
            this.cpInfo.company_info.trade_cn = item.name;
            this.cpInfo.company_info.trade = item.id;
        },
        // 地区选择回调
        calcaCallbacaddres(data) {
            this.addressKey = false;
            this.cpInfo.company_info.district_cn = data[0].name;
            this.cpInfo.company_info.district = data[0].id;
        },
        // 企业性质选择回调
        qiyeSelect(item) {
            this.qiyeKey = false;
            this.cpInfo.company_info.nature_cn = item.name;
            this.cpInfo.company_info.nature = item.id;
        },
        // 打开弹窗
        openProps(data) {
            document.body.style.overflow = 'hidden';
            this.proprKey = data;
        },
        // 数据加工
        computerData() {
            // 企业性质数据加工
            let company_type = [];
            for (let i in this.cpInfo.company_type) {
                company_type.push({
                    name: this.cpInfo.company_type[i],
                    id: i,
                });
            }
            this.qiyeactions = company_type;

            // 所属行业数据加工
            let trade = [];
            for (let i in this.cpInfo.trade) {
                trade.push({
                    name: this.cpInfo.trade[i],
                    id: i,
                });
            }
            this.hangyeactions = trade;

            // 企业规模数据加工
            let scale = [];
            for (let i in this.cpInfo.scale) {
                scale.push({
                    name: this.cpInfo.scale[i],
                    id: i,
                });
            }
            this.guimoctions = scale;
        },

        // 获取企业信息数据
        getJianliYindao() {
            axiosPost(
                '/apis/company/edit',
                {
                    pid: '2',
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.cpInfo = res.data;

                    // 企业福利数据加工
                    let tagtext = '';
                    for (let i in this.cpInfo.company_info.tag_arr) {
                        tagtext += this.cpInfo.company_info.tag_arr[i] + ',';
                    }
                    this.cpInfo.company_info.tag_cn = tagtext.substr(
                        0,
                        tagtext.length - 1
                    );

                    this.proprKey = '';
                    this.computerData();
                }
            );
        },
        // 图片点击
        changeImgClick(type) {
            if (type) {
                this.$refs.filElemmore.dispatchEvent(new MouseEvent('click'));
            } else {
                this.$refs.filElem.dispatchEvent(new MouseEvent('click'));
            }
        },
        // 上传头像接口
        handleFiles(e, type) {
            if (type) {
                this.allImglength =
                    e.target.files.length +
                    this.cpInfo.company_info.company_img.length;
            } else {
                this.allImglength = 1;
            }
            for (let i = 0; i < e.target.files.length; i++) {
                this.readFile(e.target.files[i], type);
            }
        },
        // 读取图片并压缩
        readFile(inputFile, type) {
            let that = this;
            if (inputFile) {
                if (
                    inputFile.type !== 'image/jpeg' &&
                    inputFile.type !== 'image/png' &&
                    inputFile.type !== 'image/gif'
                ) {
                    return Toast({
                        message: '不是有效的图片文件！',
                        duration: 1000,
                    });
                }

                const reader = new FileReader();
                reader.readAsDataURL(inputFile);
                reader.onload = function () {
                    let img = new Image();
                    img.src = this.result;
                    var width = 750, //图像大小
                        height = 1000, //图像大小
                        quality = 1, //图像质量
                        canvas = document.createElement('canvas'),
                        drawer = canvas.getContext('2d');
                    img.onload = function () {
                        const originHeight = img.height;
                        const originWidth = img.width;
                        let compressedWidth = img.height;
                        let compressedHeight = img.width;
                        if (originWidth > width && originHeight > height) {
                            // 更宽更高，
                            if (originHeight / originWidth > height / width) {
                                // 更加严重的高窄型，确定最大高，压缩宽度
                                compressedHeight = height;
                                compressedWidth =
                                    height * (originWidth / originHeight);
                            } else {
                                //更加严重的矮宽型, 确定最大宽，压缩高度
                                compressedWidth = width;
                                compressedHeight =
                                    width * (originHeight / originWidth);
                            }
                        } else if (
                            originWidth > width &&
                            originHeight <= height
                        ) {
                            // 更宽，但比较矮，以width作为基准
                            compressedWidth = width;
                            compressedHeight =
                                width * (originHeight / originWidth);
                        } else if (
                            originWidth <= width &&
                            originHeight > height
                        ) {
                            // 比较窄，但很高，取maxHight为基准
                            compressedHeight = height;
                            compressedWidth =
                                height * (originWidth / originHeight);
                        } else {
                            // 符合宽高限制，不做压缩
                        }
                        canvas.width = compressedWidth;
                        canvas.height = compressedHeight;
                        drawer.drawImage(
                            img,
                            0,
                            0,
                            canvas.width,
                            canvas.height
                        );
                        that.changeimg(
                            canvas.toDataURL('image/jpg', quality),
                            type
                        );
                        that.$refs.filElem.value = '';
                    };
                };
            } else {
                return;
            }
        },
        //换取图片
        changeimg(url, type) {
            axiosPostnotoken(
                '/api/upload/base64',
                {
                    image: url,
                },
                (res) => {
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 1000,
                        });
                    }
                    if (type) {
                        this.cpInfo.company_info.company_img.push(res.data.src);
                        if (
                            this.allImglength ==
                            this.cpInfo.company_info.company_img.length
                        ) {
                            this.allImglength = 0;
                        }
                    } else {
                        this.cpInfo.company_info.logo = res.data.src;
                        this.allImglength = 0;
                    }
                }
            );
        },
    },
};
</script>
<style lang="less" src="../../assets/css/jobCommon.less" scope></style>
<style lang="css" src="../../assets/css/person_edit.css" scope></style>
<style lang="css" src="../../assets/css/van-action-sheet.css" scope></style>
<style lang="less" scope>
.jinli {
    .readback {
        background: linear-gradient(0deg, #ff3b3b 0%, #fe2241 100%);
        width: 16rem;
        height: 5rem;
    }

    div.checked {
        border: 0;
    }
}
.new_com_logo {
    width: 14.5067rem;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 5px;
    text-align: center;
    position: relative;
    height: 6.72rem;
    padding-top: 4.5867rem;
}
.new_com_logo .logo_box {
    position: absolute;
    left: 50%;
    top: 1.024rem;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 2.9867rem;
    height: 2.9867rem;
    border-radius: 2.9867rem;
    overflow: hidden;
    border: 1px solid #e2e2e2;
}
.new_com_logo .logo_box img {
    width: 2.9867rem;
    height: 2.9867rem;
    border-radius: 2.9867rem;
}
.new_com_logo .logo_box .logo_edit {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    padding: 0.1707rem 0;
    width: 100%;
}
.new_com_logo .com_name {
    width: 12.8rem;
    color: #333333;
    margin: 0 auto;
}
.com_img_box {
    width: 100%;
    background: #ffffff;
    padding: 0 0.7467rem;
    overflow: hidden;
}
.com_img_box .cib_title {
    padding: 0.4267rem 0;
    color: #333333;
    width: 14.5067rem;
}
.com_img_box .cib_title span {
    color: #999999;
}
.com_img_box .cib_group {
    width: 14.5067rem;
}
.com_img_box .cib_group .cib_cell {
    width: 4.48rem;
    height: 2.9867rem;
    margin: 0 0.5333rem 0.5333rem 0;
    position: relative;
    float: left;
}
.com_img_box .cib_group .cib_cell:nth-of-type(3n) {
    margin-right: 0;
}
.com_img_box .cib_group .cib_cell.add {
    border: 1px solid #e2e2e2;
    background: url('../../assets/jobimg/new/com_img_add.png') center center
        no-repeat;
    background-size: 0.7253rem;
}
.com_img_box .cib_group .cib_cell img {
    width: 4.48rem;
    height: 2.9867rem;
    border: 0;
}
</style>
